<template>
  <el-form :model="regisForm" status-icon :rules="rules" ref="regisForm" label-width="100px" class="regisContainer">
    <h3 style="text-align: center">用户注册</h3>
    <el-form-item label="请输入手机号" prop="phonenum">
      <el-input type="text" v-model="regisForm.phone" placeholder="请输入11位手机号"></el-input>
    </el-form-item>
    <el-form-item label="输入用户名" prop="username">
      <el-input type="text" v-model="regisForm.username" autocomplete="off" placeholder="1~10位字母，数字或者下划线构成"></el-input>
    </el-form-item>
    <el-form-item label="输入昵称" prop="nickname">
      <el-input type="text" v-model="regisForm.nickname" autocomplete="off" placeholder="请输入昵称"></el-input>
    </el-form-item>
    <el-form-item label="输入密码" prop="password">
      <el-input type="password" show-password v-model="regisForm.password" autocomplete="off" placeholder="1~10位字母，数字或者下划线构成"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkpass">
      <el-input type="password" show-password v-model="regisForm.checkpass" autocomplete="off" placeholder="请再输入一遍密码"></el-input>
    </el-form-item>
    <el-form-item label="请选择身份" prop="identity">
      <el-radio v-model="regisForm.identity" label="1">供货商</el-radio>
      <el-radio v-model="regisForm.identity" label="2">借卖方</el-radio>
      <el-radio v-model="regisForm.identity" label="3">买家</el-radio>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('regisForm')">立即注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {postRequest} from "../utils/api";

export default {
  name: "Registry",
  data() {
    var checkNickname = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('昵称不能为空'));
      }
      callback();
    };
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (!phoneReg.test(value)) {
        callback(new Error('请输入正确格式手机号'));
      }
      callback();
    };
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
      let usernameReg = /^\w{1,10}$/;
      if (!usernameReg.test(value)) {
        callback(new Error('请输入正确格式用户名'));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }
      let passReg = /^\w{1,10}$/;
      if (!passReg.test(value)) {
        callback(new Error('请输入正确格式密码'));
      }
        callback();
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.regisForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      regisForm: {
        phone: '',
        username: '',
        nickname:'',
        password: '',
        checkpass: '',
        identity: '1'
      },
      rules: {
        phonenum: [
          {validator: checkPhone, trigger: 'blur'}
        ],
        username: [
          {validator: checkUsername, trigger: 'blur'}
        ],
        nickname: [
          {validator:checkNickname,trigger:'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkpass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
      }
    }
  },
  methods:
  {
    submitForm() {
      this.$refs.regisForm.validate((valid) => {
        if (valid) {
          //发送请求，创建用户
          this.postRequest('/regisController',this.regisForm).then(res=>
          {
            if(res)
            {
              this.$message({
                message: '注册成功',
                type: 'success'
              })
              //返回登录界面
              this.$router.replace('/login');
            }})
        }
        else {
          this.$message.error('请按要求输入数据');
          return false;
        }
      });
    }
  }
}
</script>

<style>
.regisContainer{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: aliceblue;
  border: 1px solid #aaaaaa;
  box-shadow: 0 0 25px #cacaca;
}
</style>
